<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生产列表</title>
</head>
<style>
    @import url("//unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");
</style>
<body>
<div id="app">
    <template>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    label="计划名称"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="计划描述"
                    width="180">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>描述: {{ scope.row.description }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{ scope.row.description }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>


            <el-table-column
                    label="开始时间"
                    width="180">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.startTime }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="结束时间"
                    width="180">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.endTime }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
</div>


</body>
<!--vue的库的引入-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--axios的引入-->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!-- script -->
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
    var Main = {
        data() {
            return {
                tableData: [{
                    name: '王小虎',
                    description: '生产一个王小虎？',
                    startTime: '2020',
                    endTime: '2021'
                }]
            }
        },
        created() {
        // console.log("加载完毕");
        this.getAll();
        },
        methods: {
            handleEdit(index, row) {
                console.log(index, row);
            },
            getAll(){
                axios.get("http://47.108.224.192:8081/plan/list").then(res=>{
                    // console.log(res);
                    this.tableData = res.data.data;
                })
            },
            handleDelete(index, row) {
                axios.delete("http://47.108.224.192:8081/plan/delete?id="+row.id).then(res=>{
                    // console.log(res);
                    this.$message({
                        type:"success",
                        message:"删除成功"
                    });
                    this.getAll();
                })
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>

</html>